<template>
	<view class="almost-lottery">
		<view class="return" @click="toIndex()" style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;z-index: 20;">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<!-- head -->
		<!-- <view class="almost-lottery__head">
			<view :class="['action', isApple && 'action-shadow']">
				<text class="gold"></text>
				<text class="content">金币余额：<text class="num">{{ goldCoin }}</text></text>
			</view>
			<view class="tip"><text class="tip-content">每次抽奖消耗 {{ goldNum }} 金币，不限次数</text></view>
		</view> -->
		<!-- action -->
		<!--  <view class="almost-lottery__action-dev" @tap="handleInitCanvas" v-if="isDev">
      <text class="text">重新生成画板-开发模式使用</text>
    </view>
    <view class="almost-lottery__action-dev" @tap="handleCheckPopup">
      <text class="text">查看 uni-popup 用例</text>
    </view> -->
		<image src="/static/draw/bg2.png" mode="widthFix" class="bg"></image>
		<view class="notice-bar" v-if="jiangpin.length!=0">
			<u-notice-bar icon="" color="#fff" bgColor="rgba(255, 255, 255, 0)" :text="jiangpin"
				direction="column"></u-notice-bar>
		</view>
		<!-- lottery -->
		<view class="almost-lottery__wheel">
			<navigator hover-class="none" url="/pages/draw/record" class="recordBtn">抽奖记录</navigator>
			<!-- <navigator hover-class="none" url="/pages/draw/record" class="recordBtn recordBtn2">抽奖规则</navigator> -->
			<view style="z-index: 5;position: relative">
				<almost-lottery :strFontColors="strFontColors" :imgWidth="imgWidth" :imgHeight="imgHeight"
					:actionBg="actionBg" :lotteryBg="lotteryBg" :prizeList="prizeList" :prizeIndex="prizeIndex"
					:colors="colors" @reset-index="prizeIndex = -1" @draw-before="handleDrawBefore"
					@draw-start="handleDrawStart" @draw-end="handleDrawEnd" @finish="handleDrawFinish"
					v-if="prizeList.length" />
			</view>

			<!-- <almost-lottery :colors="colors" :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize"
				:ring-count="2" :duration="1" :self-rotaty="false" :img-circled="true" :canvasCached="true"
				:prize-list="prizeList" :prize-index="prizeIndex" @reset-index="prizeIndex = -1"
				@draw-before="handleDrawBefore" @draw-start="handleDrawStart" @draw-end="handleDrawEnd"
				@finish="handleDrawFinish" v-if="prizeList.length" /> -->
			<image src="/static/draw/lay.png" class="lay"></image>
			<view class="almost-lottery__count">
				<!-- <image src="/static/draw/btn.png" class="count_btn"></image> -->
				<text class="text" v-if="setting.is_open==1">还剩 {{ freeNum }} 次抽奖机会</text>
				<text class="text" v-if="setting.is_open==0">{{setting.close_msg}}</text>
			</view>
		</view>
		<!-- 奖品图片 -->
		<view class="almost-lottery__rule">
			<!-- <view class="rule-head">
				<view class="line"></view>
				<text class="title">奖品图片</text>
				<view class="line"></view>
			</view> -->
			<view class="rule-body" style="padding: 20rpx 40rpx;">
				<view class="imgListTit">奖品图片
					<image src="/static/btn_bg.png"></image>
				</view>
				<view class="flex align wrap imgList">
					<view class="imgListCon" style="width: 33.33%;text-align: center;"
						v-for="(item,index) in prizeListImg" :key="index">
						<view style="width: 95%;height: 280rpx;">
							<view class="imgView">
								<image mode="aspectFill" @click="toPre(item.path)" :src="item.path"></image>
							</view>
							<view>{{item.title}}</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 活动细则 -->
		<view class="almost-lottery__rule">
			<view class="rule-head">
				<view class="line"></view>
				<text class="title">活动细则</text>
				<view class="line"></view>
			</view>
			<view class="rule-body">
				<rich-text :nodes="setting.rule_content"></rich-text>
			</view>
		</view>
		<!-- 奖品明细 -->
		<view class="almost-lottery__rule" style="margin-top:0rpx">
			<view class="imgListTit" style="margin:0rpx auto 0;position: relative;top: 50rpx;">奖品明细
				<image src="/static/btn_bg.png"></image>
			</view>
			<view class="rule-body" style="text-align: center;padding: 0;background: none;margin:0;">
				<rich-text :nodes="mingxiCon"></rich-text>
			</view>
		</view>
		<!-- 任务列表 -->
		<view class="lottery_list">
			<view class="rule-head">
				<view class="line"></view>
				<text class="title">打卡高新热门地增加抽奖机会</text>
				<view class="line"></view>
			</view>
			<!-- <view class="lottery_list_tit">打卡高新热门地增加抽奖机会</view> -->
			<view class="lists">
				<view v-for="(item,index) in signList" :key="index" class="list_item flex align almost-lottery between">
					<view class="list_left flex align">
						<image src="/static/icon.png"></image>
						<view style="width: 70%;">
							<view class="sign_tit">{{item.name}}</view>
							<view class="sign_num">抽奖机会+{{item.lottery_times}}</view>
						</view>
					</view>
					<view @click="toSign(item.id)" class="sign_btn" :style="item.is_signin==1?'background:#C9C9C9':''">
						{{item.is_signin==0?'打卡签到':'已打卡'}}
					</view>
				</view>
			</view>
		</view>
		<!-- 中奖弹窗 -->
		<!-- v-if="zhongJiangS" -->
		<view class="zhongJiang" @click="toCancelZhong()" v-if="zhongJiangS">
			<image src="/static/draw/zhong2.png" mode="aspectFill" class="zhongJiang_bg"></image>
			<view class="zhongJiangTit">恭喜您获得 {{prize_description}}</view>
			<view class="zhongJiang_con">
		<!-- 		<image mode="widthFix" src="/static/draw/img.png"></image>
				<view>飞行大会电子门票</view> -->
				<image mode="widthFix" :src="zhongImg" v-if="zhongImg!=''"></image>
				<view>{{zhongName}}</view>
				<view v-if="prize_type==2||prize_type==3" style="margin-top: 20rpx;color: black;">请点击【抽奖记录】填写个人信息领取</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk'
	import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
	import {
		clearCacheFile,
		clearStore
	} from '@/uni_modules/almost-lottery/utils/almost-utils.js'
	import {
		prizeLists,
		signinList,
		lotterySetting,
		lotteryMyinfo,
		wechatLogin,
		userDetail,
		config,
		lotteryDraw,
		signinSubmit,
		winningList,
		positionList,
		positionDetail
	} from '@/api/apiData.js';
	import {
		AesEncode
	} from '@/until/until.js'
	export default {
		name: 'Home',
		components: {
			AlmostLottery
		},
		data() {
			return {
				imgWidth: 65, //奖品图片尺寸
				imgHeight: 50,
				signList: [],
				appid: '',
				info: '',
				strFontColors: ['#000', '#fff'],
				colors: ['#A7E0FD', '#47B4FF'],
				// 开启调试模式
				isDev: false,

				// 以下是转盘配置相关数据
				lotteryConfig: {
					// 抽奖转盘的整体尺寸，单位rpx
					lotterySize: 600,
					// 抽奖按钮的尺寸，单位rpx
					actionSize: 200
				},

				// 以下是转盘 UI 配置
				// 转盘外环图，如有需要，请参考替换为自己的设计稿
				lotteryBg: require('@/static/draw/lottery-bg2.png'),
				// 抽奖按钮图
				actionBg: require('@/static/draw/action-bg.png'),

				// 以下是奖品配置数据
				// 奖品数据
				prizeList: [],
				prizeListImg: [],
				zhongName: '',
				zhongImg: '',
				// 奖品是否设有库存
				onStock: true,
				// 中奖下标
				prizeIndex: -1,

				// 是否正在抽奖中，避免重复触发
				prizeing: false,

				// 以下为中奖概率有关数据
				// 是否由前端控制概率，默认不开启，强烈建议由后端控制
				onFrontend: false,
				// 权重随机数的最大值
				prizeWeightMax: 0,
				// 权重数组
				prizeWeightArr: [],

				// 以下为业务需求有关示例数据
				// 金币余额
				goldCoin: 20,
				// 当日免费抽奖次数余额
				freeNum: 0,
				// 每次消耗的金币数
				goldNum: 20,
				// 每天免费抽奖次数
				freeNumDay: 1,
				setting: '',
				jiangpin: [],
				zhongJiangS: false,
				mingxiCon:'',
				prize_type:1,
				prize_description:'',
				path: '/pages/draw/draw'
			}
		},
		computed: {
			isApple() {
				return uni.getSystemInfoSync().platform === 'ios'
			}
		},
		methods: {
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				that.ws = new WebSocket(wsUrl);
				that.ws.onopen = () => {
					console.log("连接已建立");
					// 这里可以发送初始化消息等
					that.sendData({
						type: 'page_enter',
						path: that.path,
						params: ""
					});
				};
				that.ws.onmessage = (event) => {
					console.log("Message from server ", event.data);
					// 处理接收到的消息
				};
				that.ws.onerror = (error) => {
					console.error("连接失败: ", error);
				};
				that.ws.onclose = () => {
					console.log("连接失败，重新连接");
					// 可以在这里尝试重新连接
					that.connectWebSocket();
				};
			},
			// 发送
			sendData(data) {
				if (this.ws && this.ws.readyState === WebSocket.OPEN) {
					// this.ws.send(data); // 确保发送JSON格式的数据
					this.ws.send(JSON.stringify(data)); // 确保发送JSON格式的数据
				} else {
					console.error("WebSocket is not open");
				}
			},
			// 返回首页
			toIndex(){
				wx.miniProgram.getEnv(function(result) {
					if (result.miniprogram) {
						wx.miniProgram.reLaunch({
							url: "/pages/index/index",
						});
					}
				});
			},
			toCancelZhong() {
				this.zhongJiangS = false
				this.prizeing = false
			},
			toPre(i) {
				let list = this.prizeListImg
				let arr = []
				list.forEach(item => {
					arr.push(item.path)
				})
				uni.previewImage({
					urls: arr,
					current: i
				})
			},
			async getWinningList() {
				const result = await winningList()
				if (result.code == 1) {
					let list = []
					result.data.forEach(item => {
						list.push('恭喜' + item.user_name + '获得' + item.prize_name)
					})
					this.jiangpin = list
					this.getSetting()
				}
			},
			// 打卡
			toSign(id) {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.toSignN(id, res.longitude, res.latitude)
					},
					fail: function(res) {
						// alert(res)
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						console.log(res)
					}
				});
			},
			async toSignN(id, longitude, latitude) {
				let that = this
				const result = await signinSubmit({
					scenic_id: id,
					longitude: AesEncode(longitude),
					latitude: AesEncode(latitude)
				})
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					setTimeout(() => {
						that.lotteryMyinfo()
					}, 1000)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
				}
			},
			async lotteryMyinfo() {
				const result = await lotteryMyinfo()
				if (result.code == 1) {
					this.freeNum = result.data.lottery_times
					this.getWinningList()
				}
			},
			// 获取任务列表
			async getSigninList() {
				const result = await signinList()
				this.signList = result.data
			},
			async getSetting() {
				const result = await lotterySetting()
				this.setting = result.data
				this.getSigninList()
			},
			async getConfig() {
				const result = await config()
				if (result.code == 1) {
					this.appid = result.data.appId
					this.checkWeChatCode()
				} else {

				}
			},
			async getPositionList() {
				const result = await positionList({
					position_id: 41
				})
				const result2 = await positionDetail({
					position_id: 42
				})
				if (result.code == 1) {
					this.prizeListImg = result.data
				}
				if (result2.code == 1) {
						this.mingxiCon = result2.data.content
				}
			},
			async getInfo() {
				const result = await userDetail()
				if (result.code == 10000 || result.code == 20003) {
					this.getConfig()
					// this.wxLogin()
				} else if (result.code == 1) {
					this.info = result.data
					this.prizeList = []
					this.getPrizeList()
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			wxLogin() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				let appid = this.appid
				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				let href = "https://ncymkj.doudou00.com/get-weixin-code.html?appid=" + appid +
					"&response_type=code&scope=snsapi_userinfo&state=123456&redirect_uri=" + local + "#wechat_redirect"
				console.log(href)
				window.location.href = href
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				console.log(code)
				if (code) {
					// uni.showToast({
					// 	title: `微信code=${code}`
					// })
					this.getOpenidAndUserinfo(code)
				} else {
					this.wxLogin()
					// this.getInfo()
				}
			},
			//方法：用来判断是否是微信内置的浏览器
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
				[, ''
				])[1].replace(/\+/g, '%20')) || null
			},
			async getOpenidAndUserinfo(code) {
				// this.show = true
				const result = await wechatLogin({
					code: code
				})
				if (result.code == 1) {
					uni.setStorageSync('token', result.data.token);
					this.getInfo()
					this.sendData({
						type: 'user_auth',
						token: result.data.token,
					});
				} else {
					if (result.code == 10000) {
						window.location.replace('https://gxtravel.ncscloudmedia.com/h5/#/pages/draw/draw')
					}
					// uni.showToast({
					// 	title: result.msg,
					// 	icon: 'error'
					// });
				}
			},

			// 重新生成
			handleInitCanvas() {
				clearCacheFile()
				clearStore()

				this.prizeList = []
				this.getPrizeList()
			},
			// 通过 popup 打开
			handleCheckPopup() {
				uni.navigateTo({
					url: '/pages/popup/popup'
				})
			},
			// 获取奖品列表
			async getPrizeList() {
				uni.showLoading({
					title: '奖品准备中...'
				})

				// 等待接口返回的数据进一步处理
				let res = await prizeLists()
				console.log('获取奖品列表', res)
				if (res.code == 1) {
					let data = res.data
					let list = []
					let list2 = []
					data.forEach(item => {
						if (item.id == 0) {
							item.image =
								'https://gxtravel.ncscloudmedia.com/uploads/png/20251009/67dd5dabcc274be5ef13395a7309c4ce.png'
						}
						list.push({
							prizeId: item.id,
							prizeName: item.name,
							prizeImage: item.image
						})
					})
					this.prizeList = list
					this.getPositionList()
					this.lotteryMyinfo()
				}
			},
			// 抽奖开始之前
			handleDrawBefore(callback) {
				console.log('抽奖开始之前')
				let flag = false
				// 还有免费数次或者剩余金币足够抽一次
				if (this.freeNum > 0) {
					// 更新免费次数或金币余额
					this.freeNum--
					flag = true
				} else {
					flag = false
					uni.showModal({
						title: '提示',
						content: '你已经没有抽奖次数了',
						success: (res) => {
							// 这里需要根据业务需求处理，一般情况下会引导用户前往赚取金币的页面
							console.log('金币不足', res)
						}
					})
				}

				callback(flag)
			},
			// 本次抽奖开始
			handleDrawStart() {
				console.log('触发抽奖按钮')
				if (this.prizeing) return
				this.prizeing = true

				this.tryLotteryDraw()
			},
			// 尝试发起抽奖
			tryLotteryDraw() {
				console.log('旋转开始，获取中奖下标......')
				// 判断是否由前端控制概率
				this.remoteGetPrizeIndex()
			},
			// 抽奖
			async remoteGetPrizeIndex() {
				const result = await lotteryDraw()
				if (result.code == 1) {
					this.is_winning = result.data.is_winning
					// this.is_winning = result.data.is_winning
					this.prize_type = result.data.prize_type
					this.prize_description = result.data.prize_description
					let prizeId = result.data.prize_id
					let list = [...this.prizeList]
					for (let i = 0; i < list.length; i++) {
						let item = list[i]
						if (item.prizeId === prizeId) {
							// 中奖下标
							this.prizeIndex = i
							break
						}
					}
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
				// 模拟请求接口获取中奖信息
				// let stoTimer = setTimeout(() => {
				// 	stoTimer = null

				// 	let list = [...this.prizeList]

				// 	// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
				// 	let prizeId = Math.floor(Math.random() * list.length + 1)

				// 	// 拿到后端返回的 prizeId 后，开始循环比对得出那个中奖的数据
				// 	for (let i = 0; i < list.length; i++) {
				// 		let item = list[i]
				// 		if (item.prizeId === prizeId) {
				// 			// 中奖下标
				// 			this.prizeIndex = i
				// 			break
				// 		}
				// 	}

				// 	console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].prizeName)

				// 	// 如果奖品设有库存
				// 	if (this.onStock) {
				// 		console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].prizeStock)
				// 	}
				// }, 200)
			},
			// 本次抽奖结束
			handleDrawEnd() {
				console.log('旋转结束，执行拿到结果后到逻辑')
				// // 旋转结束后，开始处理拿到结果后的逻辑
				let prizeName = this.prizeList[this.prizeIndex].prizeName
				let prizeImage = this.prizeList[this.prizeIndex].prizeImage
				let tipContent = ''
				if (this.is_winning === 0) {
					tipContent = '很遗憾，没有中奖，请再接再厉！'
					uni.showModal({
						content: tipContent,
						showCancel: false,
						complete: () => {
							this.prizeing = false
						}
					})
				} else {
					this.zhongName = prizeName
					this.zhongImg = prizeImage
					// tipContent = `恭喜您，获得 ${prizeName} ！`
					this.zhongJiangS = true
				}

			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				console.log('抽奖转盘绘制完成', res)

				if (res.ok) {
					// 计算结束绘制的时间
					if (console.timeEnd) {
						console.timeEnd('绘制转盘用时')
					}
				}

				let stoTimer = setTimeout(() => {
					stoTimer = null

					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						mask: true,
						icon: 'none'
					})
				}, 50)
			}
		},
		onLoad() {
			this.getInfo()
			// this.getPositionList()
			// this.getWinningList()
			// this.prizeList = []
			// this.getPrizeList()
			// this.lotteryMyinfo()
			// this.getSetting()

		},
		onShow() {
			this.connectWebSocket()
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
			uni.hideLoading()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #47A9F4;
		padding-bottom: 120rpx;
	}

	.notice-bar {
		position: absolute;
		width: 50%;
		left: 25%;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), #4a8ded, rgba(255, 255, 255, 0));
		top: 300rpx;
		text-align: center;
	}

	.almost-lottery {
		flex: 1;
		// background-color: #FF893F;
	}

	.bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: auto;
	}

	.recordBtn {
		background: #47B4FF;
		color: white;
		width: fit-content;
		margin-left: auto;
		padding: 7rpx 14rpx 7rpx 26rpx;
		border-radius: 36rpx 0 0 36rpx;
		right: 0;
		top: 350rpx;
		box-shadow: 1rpx 3rpx 5rpx 1rpx rgba(0, 0, 0, 0.16);
		position: absolute;
	}

	.recordBtn2 {
		right: auto;
		left: 0;
		padding: 7rpx 26rpx 7rpx 14rpx;
		border-radius: 0rpx 36rpx 36rpx 0rpx;
	}

	.almost-lottery__head {
		position: relative;
		width: 100%;
		height: 600rpx;
		background: url('~static/draw/images/lottery/top-bg.png') no-repeat center center/cover;

		.action {
			position: relative;
			top: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 480rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 0 auto;
			color: #FFFFFF;
			font-size: 32rpx;
			background-color: rgba(255, 136, 61, 1);
			border-radius: 44rpx;
		}

		.action-shadow {
			box-shadow: 0px 14rpx 0px 0px rgba(235, 112, 36, 1);
		}

		.gold {
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			background-image: url("~static/draw/images/lottery/gold.png");

			@media (-webkit-min-device-pixel-ratio: 2),
			(min-device-pixel-ratio: 2) {
				background-image: url("~static/draw/images/lottery/gold@2x.png");
			}

			@media (-webkit-min-device-pixel-ratio: 3),
			(min-device-pixel-ratio: 3) {
				background-image: url("~static/draw/images/lottery/gold@3x.png");
			}
		}

		.num {
			color: #F9FC31;
		}

		.tip {
			position: relative;
			top: 428rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			text-align: center;
		}
	}

	.almost-lottery__wheel {
		position: relative;
		// margin-top: 200rpx;
		padding-top: 400rpx;
		text-align: center;
		margin-bottom: 50rpx;

		.almost-lottery__count {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 20rpx 58rpx 40rpx;
			position: relative;
			margin: 20rpx auto;
			z-index: 2;
			width: fit-content;
			top: 70rpx;

			.count_btn {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}

		.lay {
			position: absolute;
			bottom: 40rpx;
			width: 300rpx;
			height: 92rpx;
			left: 50%;
			margin-left: -150rpx;
			z-index: 0;
		}

		.text {
			color: #FFDE5B;
			font-size: 32rpx;
			text-decoration: underline;
		}
	}

	.lottery_list {
		position: relative;
		margin: 24rpx;

		.lottery_list_tit {
			color: #fff;
			border-left: solid 8rpx #fff;
			padding-left: 13rpx;
		}

		.lists {
			background: white;
			margin-top: 18rpx;
			border-radius: 8rpx 8rpx 0 0;
			// max-height: 600rpx;
			// overflow-y: auto;

			.list_item {
				border-bottom: solid 1rpx #e3e3e3;
				padding: 16rpx 32rpx;

				.list_left {
					width: 80%;

					image {
						width: 88rpx;
						height: 88rpx;
						margin-right: 16rpx;
					}

					.sign_tit {
						font-size: 28rpx;
						margin-bottom: 5rpx;
					}

					.sign_num {
						color: #8A8A8A;
						font-size: 20rpx;
					}
				}

				.sign_btn {
					background: #D9B16F;
					border-radius: 34rpx;
					width: 132rpx;
					text-align: center;
					color: white;
					font-size: 24rpx;
					height: 46rpx;
					line-height: 48rpx;
				}
			}
		}
	}

	.rule-head {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 40rpx 0;

		.line {
			flex: 1;
			height: 1px;
			background-color: #FFF3A5;
		}

		.title {
			// width: 280rpx;
			font-size: 32rpx;
			padding: 0 20rpx;
			color: #F63857;
			line-height: 70rpx;
			text-align: center;
			margin: 0 20rpx;
			border-radius: 8rpx;
			background-image: linear-gradient(0deg, rgba(255, 242, 158, 1), rgba(255, 244, 168, 1));
		}
	}

	.almost-lottery__rule {
		padding: 0 28rpx;
		color: #FFF8CB;
		position: relative;



		.rule-body {
			color: #000;
			font-size: 24rpx;
			padding: 10rpx 0 40rpx;
			background: white;
			padding: 20px;
			border-radius: 10px;

			.item {
				display: flex;
				margin-bottom: 10rpx;
			}

			.number {
				position: relative;
				top: 4rpx;
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #F63857;
				background: #FFF8CB;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.text {
				flex: 1;
			}

			.item-rule .text {
				display: flex;
				flex-direction: column;
			}
		}

		.imgListTit {
			position: relative;
			font-size: 42rpx;
			color: white;
			z-index: 1;
			width: fit-content;
			padding: 14rpx 49rpx 20rpx 49rpx;
			margin: 0 auto 30rpx;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}

		.imgList {
			.imgListCon {
				margin-bottom: 10rpx;

				.imgView {
					padding: 37rpx 15rpx;
					border: solid 4rpx #097EE8;
					background: #E9F3FF;
					border-radius: 12rpx;
				}

				image {
					width: 90%;
					height: 120rpx
				}

				view {
					color: #097EE8;
					font-size: 24rpx;
					margin-top: 16rpx;
				}
			}

		}
	}

	.almost-lottery__action-dev {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 400rpx;
		height: 80rpx;
		border-radius: 10rpx;
		text-align: center;
		background-color: red;
		margin: 0 auto 40rpx;

		.text {
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}

	.almost-lottery__popup-wrap {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		.almost-lottery {
			background: transparent;
		}
	}

	.zhongJiang {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1000;

		.zhongJiang_bg {
			width: 100%;
			height: 100%;
		}
		.zhongJiangTit{
			position: absolute;
			top: 30%;
			text-align: center;
			width: 100%;
			font-size: 30rpx;
			color: #1D4283;
			font-weight: bold;
		}

		.zhongJiang_con {
			position: absolute;
			width: 400rpx;
			text-align: center;
			top: 38%;
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			left: 50%;
			margin-left: -200rpx;
			color: #097EE8;

			image {
				width: 250rpx;
			}

			view {
				width: 100%;
			}
		}
	}
</style>